<div ng-init="init();" class="kmi-layout-content WIP121-content C12-content">
    <!-- 標題列-->
    <div class="kmi-header-row">
        <!-- 返回按鈕 -->
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>

        <!-- 程式名稱 -->
        <div class="header-title" ng-bind="'WIP121.title' | translate"></div>

        <!-- 左上角的logo -->
        <div class="header-logo"></div>

    </div>
    <!-- 程式內容-->
    <div class="kmi-layout-main-content" ng-class="[queryMode]">
        <div class="kmi-layout-page">
            <!-- 程式內容撰寫於此-->
            <div class="kmi-report-panel"></div>
            <div id="report_content" style="opacity: 1;">
                <div class="kmi-list column-selector" column-selector-id="WIP121_workItemList">
                    <div class="kmi-list__header">
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.MachineType' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.MachineNumber' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.MachineName' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.State' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.StateDesc' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.StartDate' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.EndDate' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.ReasonNumber' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.ReasonName' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.ReasonDesc' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'WIP121.list.operator_no' | translate"></div>
                    </div>
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-class="RowClass(item)" ng-repeat="item in getPages(workItemList,PageConfig,filterItem) track by $index">
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.MachineType"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.MachineNumber"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.MachineName"></div>
                            <div class="kmi-list__column column-border kmi-text-fields" style="flex:1;">
                                <input ng-model="item.StateName" readonly="readonly" ng-click="loadStateNo(item);"></input>
                                <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.StateDesc"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.StartDate"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.EndDate"></div>
                            <div class="kmi-list__column column-border kmi-text-fields" style="flex:1;">
                                <input ng-model="item.ReasonNumber" readonly="readonly" ng-disabled="DisabledReason(item.State)" ng-click="loadReasonNo(item);"></input>
                                <div class="tip" ng-disabled="DisabledReason(item.State)"><i class="material-icons">&#xE5CF;</i></div>
                            </div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.ReasonName"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.ReasonDesc"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.operator_no"></div>
                        </div>
                    </div>
                </div>
                <!-- 分頁按鈕 -->
                <div class="page-content">
                    <div class="page-icon">
                        <img src="image/icons/dropleft.png"></img>
                        <div class="kmi-can-click" ng-click="PageConfig.page = (PageConfig.page-1<0?0:PageConfig.page-1);"></div>
                    </div>
                    <label ng-bind="(PageConfig.page +1)+' / '+PageConfig.total_page"></label>
                    <div class="page-icon">
                        <img src="image/icons/dropright.png"></img>
                        <div class="kmi-can-click" ng-click="PageConfig.page = (PageConfig.page+1>(PageConfig.total_page-1)?(PageConfig.total_page-1):PageConfig.page+1);"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="kmi-layout-footer">
        <!-- 置底按鈕，不一定全部都有使用方法請參照底部大型圓按鈕 -->
        <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1" ng-click="confirm();" ng-disabled="selectlist.current_index == -1">
            <i class="material-icons">done</i>
        </button>
    </div>

</div>